<template>
	<div class="container">
		<div class="btn-return" @click="back">
			<img src="../../../assets/images/return.png" alt="" />
			返回
		</div>

		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<el-form ref="query" :inline="true" :model="queryParams" label-width="100px">
					<el-form-item label="订单编号：">
						<el-input v-model.trim="queryParams.orderSn" placeholder="请输入订单编号" clearable></el-input>
					</el-form-item>
					<el-form-item label="时间:：">
						<el-date-picker v-model.trim="queryParams.date" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
					<br />
					<el-form-item label="订单类型:：" prop="orderStatus">
						<el-select v-model.trim="queryParams.orderType" placeholder="请选择订单类型" clearable>
							<el-option label="全部" :value="null"></el-option>
							<el-option v-for="item in orderOptions2" :key="item.label" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="收支类型：">
						<el-select v-model.trim="queryParams.type" placeholder="请选择收支类型">
							<el-option label="全部" :value="null"></el-option>
							<el-option label="收入" :value="1"></el-option>
							<el-option label="支出" :value="2"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="query">搜索</el-button>
						<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="content">
				<div class="title">
					<span v-if="name" class="text">财务记录/{{ name }}</span>
					<el-button class="btn" type="primary" icon="el-icon-download" @click="handleExport">导出</el-button>
				</div>
				<el-table ref="goodsDown" v-loading="loading" :data="list" @selection-change="handleSelectionChange">
					<el-table-column :formatter="emptyToString" align="center" type="index" label="序号" width="50" />
					<el-table-column :formatter="emptyToString" align="center" label="财务编号" prop="orderSn" />
					<el-table-column :formatter="emptyToString" align="center" label="用户ID" prop="disburseUuid" />
					<el-table-column :formatter="emptyToString" align="center" label="手机号" prop="mobile" min-width="110" />
					<el-table-column :formatter="emptyToString" align="center" label="商品ID" prop="goodsId"> </el-table-column>
					<el-table-column :formatter="emptyToString" align="center" label="商品名称" width="150px" prop="goods_name" show-overflow-tooltip>
						<template slot-scope="scope">
							<div class="goods-name-style">
								{{ scope.row.goodsName }}
							</div>
						</template>
					</el-table-column>
					<el-table-column :formatter="emptyToString" align="center" label="商品图片">
						<template slot-scope="scope">
							<el-image style="width: 50px; height: 50px" :src="scope.row.goodsImg" :preview-src-list="[scope.row.goodsImg]"></el-image>
						</template>
					</el-table-column>
					<el-table-column :formatter="emptyToString" align="center" label="订单类型" prop="orderType" />
					<el-table-column :formatter="emptyToString" align="center" label="收支类型" prop="type">
						<template slot-scope="scope">
							{{ scope.row.type == 1 ? '收入' : '支出' }}
						</template>
					</el-table-column>
					<el-table-column :formatter="emptyToNumber" align="center" label="供应价" prop="amount" />
					<el-table-column :formatter="emptyToString" align="center" label="时间" prop="createTime" min-width="156" />
				</el-table>

				<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
			</div>
		</el-card>

		<!--    <div style="margin-top: 60px">-->
		<!--      <el-button type="primary" style="padding: 10px 38px;" @click="query">搜索</el-button>-->
		<!--    </div>-->
	</div>
</template>

<script>
import { getFinanceList, getFinanceEarnings } from '@/api/mall/supplier';
export default {
	name: '',
	data() {
		return {
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				name: '',
				mobile: '',

				orderSn: '',
				date: [],
			},
			name: '',
			orderOptions2: [
				{ label: '商城订单', value: '商城订单' },
        { label: '积分订单', value: '积分订单' },
        { label: '秒杀订单', value: '秒杀' },
        { label: '砍价订单', value: '砍价' },
        { label: '拼团订单', value: '拼团' },
			],
			total: 0,
			loading: false,
			id: null,
			list: [],
			supplierEarnings: 0,
			supplierRefund: 0,
		};
	},
	created() {
		if (this.$route.query.id) {
			this.id = this.$route.query.id;
		}
		if (this.$route.query.name) {
			this.name = this.$route.query.name;
		}
		this.getList();
		this.getDetails();
	},
	methods: {
		resetQuery() {
			this.queryParams = {
				pageNum: 1,
				pageSize: 10,
				name: '',
				mobile: '',
				orderSn: '',
				date: [],
			};
			this.getList();
		},
		handleExport() {},
		query() {
			this.queryParams.pageNum = 1;
			this.getList();
		},

		getDetails() {
			getFinanceEarnings({ userId: this.id }).then((res) => {
				console.log(res);
				this.supplierEarnings = res.data.supplierEarnings ? res.data.supplierEarnings : 0;
				this.supplierRefund = res.data.supplierRefund ? res.data.supplierRefund : 0;
			});
		},
		getList() {
			let obj = {
				current: this.queryParams.pageNum,
				endCreateTime: this.queryParams.date.length > 0 ? this.queryParams.date[1] : null,
				orderSn: this.queryParams.orderSn,
				type: this.queryParams.type,
				size: this.queryParams.pageSize,
				startCreateTime: this.queryParams.date.length > 0 ? this.queryParams.date[0] : null,
				userId: this.id,
			};
			getFinanceList(obj).then((res) => {
				this.list = res.data.records;
				this.total = res.data.total;
			});
		},
		back() {
			this.$router.back();
		},
		handleSelectionChange() {},
	},
};
</script>

<style scoped lang="scss">
.container {
	padding: 20px 24px;
	.content {
		.title {
			padding-bottom: 10px;
			display: flex;
			align-items: center;
			.btn {
				flex-shrink: 0;
			}
			.text {
				//height: 36px;
				line-height: 36px;
				font-weight: 900;
				font-size: 18px;
				padding-right: 24px;
				//flex: 1;
			}
		}
	}
	.header {
		width: 1621px;
		height: 131px;
		background: #ffffff;
		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.04);
		opacity: 1;
		border-radius: 0px;
		margin-top: 20px;
		display: flex;
		align-items: center;
		padding: 0 20px;
		.quer-form {
			width: 100%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.el-form-item {
				//margin-bottom: 0;
				margin: 10px 30px;
			}
		}
		.info-message {
			display: flex;
			.box1 {
				background: url('../../../assets/images/ic_6093.png') no-repeat;
				background-size: 100% 100%;
			}
			.box2 {
				background: url('../../../assets/images/ic_6095.png') no-repeat;
				background-size: 100% 100%;
			}
			.box {
				width: 208px;
				height: 91px;
				//background: #215ACD;
				opacity: 1;
				border-radius: 20px;
				color: #ffffff;
				text-align: center;
				overflow: hidden;
				margin-right: 24px;
				.num {
					font-size: 24px;
					font-weight: 300;
					margin-top: 17px;
				}
				.text {
					font-size: 12px;
					font-weight: bold;
					margin-top: 8px;
				}
			}
		}
	}
	.btn-return {
		width: 92px;
		height: 30px;
		background: #6373ee;
		opacity: 1;
		border-radius: 20px;
		display: flex;
		color: #ffffff;
		font-size: 14px;
		line-height: 30px;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.04);
		img {
			display: block;
			width: 15px;
			flex-shrink: 0;
			height: 14px;
			margin-right: 6px;
		}
	}
}
</style>
